<template>
	<view class="shareAdv">
		<view class="pageImg imgPublic">
			<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/shareBg.png" mode="widthFix"></image>
		</view>
		<view :class="device=='ios'?'ios_pageTitle':'and_pageTitle'">
			<view class="statusBar"></view>
			<view class="pageTitle dFlex jBetween_aCenter">
				<view class="backIcon imgPublic" @tap.stop='back()'>
					<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/back3.png" mode="widthFix"></image>
				</view>
				<view class="title"></view> 
				<view class="backIcon imgPublic"></view>  
			</view>
		</view>
		<view class="advContent">
			<view class="adv">
				<view class="titles">累计邀请{{datas.inviteInfo.need_num}}人，可免单</view>
				<view class="explain">
					<view class="explainImg imgPublic">
						<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/shareBox.png" mode="widthFix"></image>
					</view>
					<view class="explainContent">
						<view class="current">当前已邀请<text>{{datas.all_num?datas.all_num:'0'}}人</text>下单 </view>
						<view class="explainImg imgPublic">
							<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/shareExplain.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="shareBtn" @tap.stop='invite' v-if="shareFlag && datas.all_num < datas.inviteInfo.need_num">
					<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/shareBtn.png" mode="widthFix"></image>
				</view>
				<button open-type="contact" class="shareBtn" v-if="shareFlag && datas.all_num >= datas.inviteInfo.need_num">
					<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/shareBtn2.png" mode="widthFix"></image>
				</button>
			</view>
			<view class="config">
				<view class="menus dFlex jBetween_aCenter">
					<view :class="['menuOne',firstMenu == '0'?'active1':'']" @tap="changeFirstMenu(0)">
						<view class="menuBg imgPublic">
							<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/actMenu.png" mode="widthFix"></image>
						</view>
						<view class="menuContent dFlex jCenter_aCenter">邀请记录</view>
					</view> 
					<view :class="['menuOne',firstMenu == '1'?'active1':'']" @tap="changeFirstMenu(1)">
						<view class="menuBg imgPublic">
							<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/actMenu.png" mode="widthFix"></image>
						</view>
						<view class="menuContent dFlex jCenter_aCenter">活动规则</view>
					</view>
				</view>
				<view class="configContent">
					<view class="menuOne" v-if="firstMenu == '0'">
						<view class="menuSecond dFlex jAround_aCenter">
							<view :class="['smallMenu',secondMenu == '0'?'active2':'']" @tap.stop='changeSecondMenu(0)'>
								<text>待下单({{notDown}})</text>
								<view class="line"></view>
							</view>
							<view :class="['smallMenu',secondMenu == '1'?'active2':'']" @tap.stop='changeSecondMenu(1)'>
								<text>已下单({{haveDown}})</text>
								<view class="line"></view>
							</view>
							<view :class="['smallMenu',secondMenu == '2'?'active2':'']" @tap.stop='changeSecondMenu(2)'>
								<text>已完成({{haveGet}})</text>
								<view class="line"></view>
							</view>
						</view>
						<view class="record" v-if="list.length">
							<view class="line" v-for="(item,index) in list" :key='index'>
								<view class="userInfo dFlex jBetween_aCenter">
									<view class="user dFlex jStart_aCenter">
										<view class="userTx imgPublic">
											<image :src="item.avatar"></image>
										</view> 
										<text>{{item.nickname}}</text>
									</view>
									<view class="xia" v-if="secondMenu == '0'">喊TA下单</view>
								</view>
								<view class="progress">
									<view class="lineOne dFlex jStart_aStart">
										<view class="lineIcon imgPublic">
											<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/pro1.png" mode="widthFix"></image>
										</view>
										<text>{{item.createtime}}通过分享进入小程序</text>
									</view>
									<view class="lineOne dFlex jStart_aStart" v-if="secondMenu == '0'">
										<view class="lineIcon imgPublic">
											<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/pro2.png" mode="widthFix"></image>
										</view>
										<text>成功邀请，{{datas.inviteInfo.need_num}}人下单并成功收货，即免单</text>
									</view>
									<view class="lineOne dFlex jStart_aStart" v-if="secondMenu == '1' || secondMenu == '2'" @tap.stop='copyNum(item.orderNo)'>
										<view class="lineIcon imgPublic">
											<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/pro1.png" mode="widthFix"></image>
										</view>
										<text>{{item.down_time}}成功下单，订单编号：{{item.orderNo}} 点击单号复制</text>
									</view> 
									<view class="lineOne dFlex jStart_aStart" v-if="secondMenu == '2'">
										<view class="lineIcon imgPublic">
											<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/pro1.png" mode="widthFix"></image>
										</view>
										<text>{{item.get_time}}成功收货</text>
									</view> 
								</view>
							</view>
						</view>
						<view class="record imgPublic empty" v-else>
							<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/empty.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="menuTwo" v-if="firstMenu == '1'">{{datas.inviteInfo.rule}}</view>
				</view>
			</view>
			<view class="seat"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				firstMenu:0,
				secondMenu:0,
				shopId:'',
				invitedId:'',
				datas:{},
				shareFlag:true,
				notDown:0,//待下单
				haveDown:0,//已下单
				haveGet:0,//已收货
				list:[],
				list1:[],
				list2:[],
				list3:[],
			};
		},
		onLoad(e) {
			this.shopId = e.id;
			this.invitedId = e.inviteId;
			this.notDown = 0;
			this.haveDown = 0;
			this.haveGet = 0;
			this.list = [];
			this.list1 = [];
			this.list2 = [];
			this.list3 = [];
			this.initData();
		},
		onShow(){
			
		},
		methods:{
			initData(){
				this.tool.getData('/api/mall/getInviteInfo',{
					invite_id:this.invitedId,
					goods_id:this.shopId
				}).then(res=>{
					console.log(res);
					if(res){
						if(res.inviteInfo.status == '2'){
							this.shareFlag = false;
							uni.showToast({
								title:'该活动已失效',
								icon:'none'
							})
							return;
						}
						let nowTime = parseInt(new Date().getTime() / 1000);
						if(nowTime>=res.inviteInfo.start_time && nowTime<res.inviteInfo.end_time){
							this.shareFlag = true;
						}else{
							this.shareFlag = false;
						}
						res.logList.map((item,index)=>{
							item.createtime = this.tool.timestampToTime(item.createtime * 1000,1);
							item.down_time = item.down_time>0?this.tool.timestampToTime(item.down_time * 1000,1):'';
							item.get_time = item.get_time>0?this.tool.timestampToTime(item.get_time * 1000,1):'';
							if(item.is_down == '0'){//待下单
								this.notDown ++;
								this.list1.push(item);
								this.list = this.list1;
							}else if(item.is_down == '1' && item.is_get ==''){//已下单
								this.haveDown ++;
								this.list2.push(item);
							}else if(item.is_down == '1' && item.is_get =='1'){//已完成
								this.haveGet ++;
								this.list3.push(item);
							}
						})
						this.datas = res;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 一级菜单
			changeFirstMenu(idx){
				this.firstMenu = idx;
			},
			// 二级菜单
			changeSecondMenu(idx){
				this.secondMenu = idx;
				if(idx == '0'){
					this.list = this.list1;
				}else if(idx == '1'){
					this.list = this.list2;
				}else if(idx == '2'){
					this.list = this.list3;
				}
			},
			// 邀请用户
			invite(){
				uni.navigateTo({ 
					url:'./invite?shopId='+this.shopId+"&invitedId="+this.invitedId,
				})
			},
			// 返回上一页
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			// 复制单号
			copyNum(num){
				uni.setClipboardData({
					data:num,
					success() {
						uni.showToast({
							title:"已复制单号",
							icon:'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: rgb(252, 50, 78);
	}
	.shareAdv{
		width: 100%;
		position: relative;
		.advContent{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			padding: 58% 4% 20px;
			box-sizing: border-box;
			.config{
				width: 100%;
				background: white;
				border-radius: 34rpx;
				overflow: hidden;
				margin: 20px auto ;
				.configContent{
					width: 100%;
					padding: 0 30rpx;
					box-sizing: border-box;
					.menuTwo{
						width: 100%;
						padding: 40rpx 30rpx;
						box-sizing: border-box;
					}
					.menuOne{
						width: 100%;
						.record{
							width: 100%;
							.line{
								width: 100%;
								padding: 20rpx 0 0;
								border-bottom: 1px solid #D1D1D1;
								.progress{
									width: 100%;
									font-size: 13px;
									color: #666666;
									.lineOne{
										width: 100%;
										margin-bottom: 24rpx;
										text{
											flex: 1;
											display: block;
										}
										.lineIcon{
											width: 40rpx;
											height: 40rpx;
											margin-right: 8rpx;
										}
									}
								}
								.userInfo{
									width: 100%;
									margin: 18rpx 0;
									.user{
										flex: 2;
										font-size: 18px;
										font-weight: 500;
										.userTx{
											width: 72rpx;
											height:72rpx;
											border-radius: 50%;
											margin-right: 16rpx;
											image{
												width: 100%;
												height: 100%;
												border-radius: 50%;
											}
										}
									}
									.xia{
										width: max-content;
										color: white;
										border-radius: 50px;
										padding: 6rpx 16rpx;
										background: #FC3C11;
									}
								}
							}
						}
						.menuSecond{
							width: 100%;
							border-bottom: 1px solid #D1D1D1;
							.smallMenu{
								flex: 1;
								padding-top: 12rpx;
								font-size: 16px;
								text-align: center;
								.line{
									width: 48rpx;
									height: 8rpx;
									border-radius: 50px;
									background: white;
									margin: 10rpx auto 0;
								}
							}
							.active2{
								color: #9D1E04;
								.line{
									background: #9D1E04;
								}
							}
						}
					}
				}
				.menus{
					width: 100%;
					.menuOne{
						flex: 1;
						position: relative;
						background: #FFE1CB;
						.menuBg{
							visibility: hidden;
						}
						.menuContent{
							color:rgba(157, 30, 4, 0.5);
							font-size: 22px;
							font-weight: bold;
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
						}
					}
					.active1{
						.menuContent{
							color: #9D1E04;
						}
						.menuBg{
							visibility: inherit;
						}
					}
				}
				
			}
			.adv{
				width: 100%;
				.shareBtn{
					width: 77%;
					margin:0 auto 0;
				}
				.explain{
					width: 100%;
					position: relative;
					margin: 6px auto 0;
					padding: 0 5px;
					box-sizing: border-box;
					.explainContent{
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						text-align: center;
						.explainImg{
							width: 80%;
							margin: 0 auto;
						}
						.current{
							width: 100%;
							text-align: center;
							margin: 54rpx 0;
							text{
								color: #FC324F;
								font-size: 20px;
								font-weight: bold;
								margin: 0 2px;
							}
						}
					}
				}
				.titles{
					width: 100%;
					padding:0 50rpx;
					box-sizing: border-box;
					font-size: 16px;
					color: #FFFFFF;
				}
			}
		}
	}
	.ios_pageTitle,.and_pageTitle{
		.pageTitle{
			.backIcon{
				width: 56rpx;
			}
		}
	}
</style>
